<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大数据导论作业</title>
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
<body>

    <div id="flight" style="width: 600px;height: 500px;float: left;"></div>
    <div id="railway" style="width: 600px;height: 500px;float: right;"></div>

    <!-- 以下JS代码用来初始化echart实例 -->
    <script type="text/javascript">
        var myChart1 = echarts.init(document.getElementById('flight'));
        var myChart2 = echarts.init(document.getElementById('railway'));
        // 定义图表的样式
        var option1 = {
            title: {
                text: '疫情前后航空业情况'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['民航客运量当期值（万人）']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['11月', '12月', '1月', '2月', '3月', '4月']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '民航客运量当期值（万人）',
                    type: 'bar',
                    data: [5306.0, 5276.0, 5061.0, 834.0, 1515.0, 1671.0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };

        var option2 = {
            title: {
                text: '疫情前后铁路情况'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['铁路客运量当期值（万人）']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ['11月', '12月', '1月', '2月', '3月', '4月']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '铁路客运量当期值（万人）',
                    type: 'bar',
                    data: [27080.0, 26306.0, 27126.0, 3723.0, 7495.0, 11160.0],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };

        myChart1.setOption(option1);
        myChart2.setOption(option2);
    </script>

</body>
</html>